<template>
  <a-card :hoverable="true" class="article-card" @click="$emit('click', item.id)">
    <template v-if="item.coverImage" #cover>
      <a-image :src="item.coverImage" :fallback="fallbackCover" :preview="false" />
    </template>
    <a-card-meta :title="item.title">
      <template #description>
        <div class="summary">{{ item.summary }}</div>
        <div class="meta">
          <span class="link" @click.stop="$emit('click-category', item)">{{ item.categoryName || '未分类' }}</span>
          <span>{{ item.authorName || '匿名' }}</span>
        </div>
        <div class="stats">
          <span>👁️ {{ item.viewCount }}</span>
          <span>👍 {{ item.likeCount }}</span>
          <span>💬 {{ item.commentCount }}</span>
        </div>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup lang="ts">
import type { ArticleListItemVO } from '@/types/api'
defineEmits(['click','click-category'])
defineProps<{ item: ArticleListItemVO }>()
const fallbackCover = 'https://via.placeholder.com/400x240?text=No+Cover'
</script>

<style scoped>
.article-card { height: 100%; }
.summary { color: rgba(0,0,0,0.65); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meta { margin-top: 8px; display: flex; gap: 12px; color: rgba(0,0,0,0.45); font-size: 12px; }
.meta .link { cursor: pointer; color: #1677ff; }
.meta .link:hover { text-decoration: underline; }
.stats { margin-top: 8px; display: flex; gap: 12px; color: rgba(0,0,0,0.45); font-size: 12px; }
</style>


